import { ExclamationCircleFilled } from "@ant-design/icons";
import { Modal } from "antd";
import React, { useImperativeHandle, useState } from "react";

const ModalConfirm = React.forwardRef((props: any, ref) => {
  const { successCallback, children } = props;
  const [showContent, setShowContent] = useState("");
  const [modalOpen, setModalOpen] = useState(false);
  const [okLoading, setOkLoading] = useState<boolean>(false);
  const handleModalShow: any = (desc?: string) => {
    setOkLoading(false)
    if (!modalOpen) {
      setShowContent(desc || "");
    }
    setModalOpen(!modalOpen);
  };
  const getModalOpenFlag = () => {
    return modalOpen;
  };
  useImperativeHandle(ref, () => ({
    handleModalShow,
    getModalOpenFlag,
    setOkLoading
  }));
  return (
    <Modal
      className="modal-confirm-wrapper"
      title={
        <div className="modal-confirm-title">
          <ExclamationCircleFilled className="confirm-icon" />
          <span className="confirm-title">操作确认</span>
        </div>
      }
      open={modalOpen}
      onOk={successCallback ? successCallback : handleModalShow}
      onCancel={handleModalShow}
      okText="确认"
      cancelText="取消"
      okButtonProps={{ loading: okLoading }}
      maskClosable={false}
    >
      {showContent}
      {children && <div className="modal-confirm-custom-wrapper">{children}</div>}
    </Modal>
  );
});

export default ModalConfirm;
